<template>
  <div class="forge-container smithy-theme" :class="{ 'remodel-glow': selectedItem && remodelLevel(selectedItem) > 7 }">
    <div class="header">
      <button class="back-btn" @click="goBack">返回</button>
      <div class="header-center">
        <h2>江湖铁匠铺</h2>
        <div class="theme-desc">打铁百炼，器生灵；良匠妙手，铸就神兵。</div>
      </div>
      <div class="info-dot" @click="openGuide" title="打造引导">❓</div>
    </div>

    <!-- 顶部：打造消耗道具列表 -->
    <div class="consumables-bar">
      <div class="consumables-section" v-for="sec in consumablesDisplay" :key="sec.title">
        <div class="section-title">{{ sec.title }}</div>
        <div class="items" :class="{ 'two-rows': sec.items && sec.items.length > 1 }">
          <div class="item" v-for="it in sec.items" :key="sec.title + '-' + it.id" :class="{ enough: it.enough, optional: it.optional }">
            <span class="simple-line">{{ it.name }}: {{ it.have }}</span>
           </div>
        </div>
      </div>
    </div>

    <!-- 引导说明对话框 -->
    <div v-if="showGuide" class="guide-mask" @click.self="closeGuide">
      <div class="guide-dialog">
        <div class="guide-title">打造引导说明</div>
        <div class="guide-content">
          <p>• 打造：消耗银两，创建指定槽位的新装备。</p>
          <p>• 强化：选择基础或改造词条，消耗强化石提升数值；完美强化石提升成功率。</p>
          <p>• 洗练：可多选词条进行洗练，消耗洗练石；极品洗练石有更佳概率。</p>
          <p>• 改造：消耗精铁提升改造等级；玄铁为高级材料，提供更强效果。</p>
          <p class="minor">所有具体数值与消耗以服务器配置为准；当前展示基于后端常量与物品配置。</p>
        </div>
        <div class="guide-actions">
          <button class="action-btn primary" @click="closeGuide">我知道了</button>
        </div>
      </div>
    </div>

    <div class="content">
      <!-- 左侧：装备列表（垂直样式） -->
      <div class="left-list">
        <div class="list-header">
          <span>我的装备</span>
          <button class="refresh-btn" @click="loadEquipments" :disabled="loading">刷新</button>
        </div>
        <div class="equipment-list" v-if="filteredEquipments.length">
          <div
            class="equipment-item"
            v-for="item in filteredEquipments"
            :key="item.equipmentId || item.EquipmentID || item.id"
            :class="{ active: isSelected(item) }"
            @click="selectItem(item)"
          >
            <div class="item-icon">
              <span class="icon-text">{{ typeIcon(item) }}</span>
            </div>
            <div class="item-info">
              <div class="item-name">
                {{ displayName(item) }}
                <span v-if="isUp(item)" class="badge-up">上阵</span>
              </div>
              <div class="item-extra">
                <span class="slot-name">{{ slotName(itemSlot(item)) }}</span>
                <span class="level">强化 +{{ item.strengthenLevel || item.StrengthenLevel || 0 }}</span>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="empty-tip">暂无装备</div>
      </div>

      <!-- 右侧：打造详情 -->
      <div class="right-panel" v-if="selectedItem">
        <div class="panel-card">
          <!-- 装备信息展示区 -->
          <div class="equip-info">
            <div class="info-left">
              <div class="detail-icon">
                <span class="icon-text">{{ typeIcon(selectedItem) }}</span>
              </div>
            </div>
            <div class="info-right">
              <h3 class="detail-name">{{ displayName(selectedItem) }}</h3>
              <div class="detail-sub">
                <span class="slot-name">{{ slotName(itemSlot(selectedItem)) }}</span>
                <span class="level">等级：{{ level(selectedItem) }}级（原始等级{{ originLevel(selectedItem) }}）</span>
                <span class="remodel">改造等级：{{ remodelLevel(selectedItem) }}级</span>
                <span v-if="isUp(selectedItem)" class="badge-up">上阵</span>
              </div>
            </div>
          </div>

          <!-- 词条展示区 -->
          <div class="entries">
            <!-- 基础词条 -->
            <div class="entry-section">
              <div class="entry-title">基础词条</div>
              <div class="entry-list">
                <div
                  v-for="(attr, idx) in baseAttrs"
                  :key="idx"
                  :class="['entry-item', selectedBaseIndex === idx ? 'selected' : '']"
                  @click="toggleBase(idx)"
                >
                  <div class="entry-name">{{ attrName(attr) }}</div>
                  <div class="entry-value">{{ attrValueText(attr) }}</div>
                </div>
              </div>
              <div class="entry-tip">选择一条基础词条后，可点击“强化”。</div>
            </div>

            <!-- 洗练词条 -->
            <div class="entry-section">
              <div class="entry-title">洗练词条</div>
              <div class="entry-list">
                <div
                  v-for="(attr, idx) in washAttrs"
                  :key="idx"
                  :class="['entry-item', selectedWashIndices.includes(idx) ? 'selected' : '']"
                  @click="toggleWash(idx)"
                >
                  <div class="entry-name">{{ attrName(attr) }}</div>
                  <div class="entry-value">{{ attrValueText(attr) }}</div>
                </div>
              </div>
              <div class="entry-tip">可单选或多选洗练词条后，点击“洗练”。</div>
            </div>

            <!-- 改造词条 -->
            <div class="entry-section">
              <div class="entry-title">改造词条</div>
              <div class="entry-list">
                <div
                  v-for="(attr, idx) in remodelAttrs"
                  :key="idx"
                  :class="['entry-item', selectedRemodelIndex === idx ? 'selected' : '']"
                  @click="toggleRemodel(idx)"
                >
                  <div class="entry-name">{{ attrName(attr) }}</div>
                  <div class="entry-value">{{ attrValueText(attr) }}</div>
                </div>
              </div>
              <div class="entry-tip">选择一条改造词条后，可点击“强化”或“改造”。</div>
            </div>
          </div>

          <!-- 打造操作 -->
          <div class="actions">
            <button class="action-btn primary" @click="doStrengthen" :disabled="opLoading || !canStrengthen">强化</button>
            <button class="action-btn" @click="doWash" :disabled="opLoading || !canWash">洗练</button>
            <button class="action-btn" @click="doRemodel" :disabled="opLoading">改造</button>
          </div>

          <div class="op-status" v-if="opMessage">
            <span class="status-text">{{ opMessage }}</span>
          </div>
        </div>
      </div>

      <div class="right-panel" v-else>
        <div class="panel-card empty">
          <span>请选择左侧装备进行打造</span>
        </div>
      </div>
    </div>

    <!-- 底部：新装备打造 -->
    <div class="forge-bar">
      <div class="forge-title">打造新装备（消耗：银两100）</div>
      <div class="forge-actions">
        <button class="action-btn" @click="doForge(1)" :disabled="opLoading">武器</button>
        <button class="action-btn" @click="doForge(2)" :disabled="opLoading">帽子</button>
        <button class="action-btn" @click="doForge(3)" :disabled="opLoading">衣服</button>
        <button class="action-btn" @click="doForge(4)" :disabled="opLoading">鞋子</button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getPlayerEquipments,
  strengthenEquipment,
  washEquipment,
  remodelEquipment,
  forgeEquipment
} from '../../src/api/equipment'

import { ITEM_ID, ITEM_NAME, FORGE_COSTS } from '../../src/config/items'

export default {
  data() {
    return {
      equipmentList: [],
      selectedItem: null,
      loading: false,
      opLoading: false,
      opMessage: '',
      allowedSlots: ['weapon', 'armor', 'helmet', 'boots'],
      // 词条选择状态
      selectedBaseIndex: null,
      selectedWashIndices: [],
      selectedRemodelIndex: null,
      // 引导对话框
      showGuide: false,
    }
  },
  computed: {
    filteredEquipments() {
      return (this.equipmentList || []).filter(e => this.allowedSlots.includes(this.itemSlot(e)))
    },
    // 顶部消耗道具展示：结合常量与当前背包数量
    consumablesDisplay() {
      const getCount = (id) => {
        try { return this.$store.getters['items/getItemCount'](id) || 0 } catch (e) { return 0 }
      }
      const sections = [
        { title: '打造', cost: FORGE_COSTS.forgeNew },
        { title: '强化', cost: FORGE_COSTS.strengthen, extra: FORGE_COSTS.strengthenPlus },
        { title: '洗练', cost: FORGE_COSTS.wash, extra: FORGE_COSTS.washPlus },
        { title: '改造', cost: FORGE_COSTS.remodel, extra: FORGE_COSTS.remodelPlus },
      ]
      return sections.map(sec => {
        const items = Object.entries(sec.cost || {}).map(([idStr, need]) => {
          const id = Number(idStr)
          const have = getCount(id)
          return { id, name: ITEM_NAME[id] || `道具#${id}` , need, have, enough: have >= need }
        })
        const extras = sec.extra ? Object.entries(sec.extra).map(([idStr, need]) => {
          const id = Number(idStr)
          const have = getCount(id)
          return { id, name: ITEM_NAME[id] || `道具#${id}` , need, have, enough: have >= need, optional: true }
        }) : []
        return { title: sec.title, items: items.concat(extras) }
      })
    },
    // 词条列表（兼容多种返回结构）
    baseAttrs() {
      const item = this.selectedItem || {}
      return this.normalizeAttrs(item.attrs || item.base_attrs || item.BaseAttrs || item.Attributes || [])
    },
    washAttrs() {
      const item = this.selectedItem || {}
      return this.normalizeAttrs(item.wash_attrs || item.WashAttrs || [])
    },
    remodelAttrs() {
      const item = this.selectedItem || {}
      return this.normalizeAttrs(item.remodel_attrs || item.RemodelAttrs || [])
    },
    // 操作可用性
    canStrengthen() {
      return this.selectedBaseIndex !== null || this.selectedRemodelIndex !== null
    },
    canWash() {
      return this.selectedWashIndices.length > 0
    }
  },
  mounted() {
    this.loadEquipments()
  },
  methods: {
    // 加载装备列表
    async loadEquipments() {
      try {
        this.loading = true
        const roleId = (typeof uni !== 'undefined' ? uni.getStorageSync('role_id') : localStorage.getItem('role_id'))
        const res = await getPlayerEquipments({ role_id: roleId })
        if (res && res.code === 1) {
          // 兼容不同返回结构
          const payload = res.data
          if (Array.isArray(payload)) {
            this.equipmentList = payload
          } else if (Array.isArray(payload?.list)) {
            this.equipmentList = payload.list
          } else if (Array.isArray(payload?.data)) {
            this.equipmentList = payload.data
          } else if (Array.isArray(res.result)) {
            this.equipmentList = res.result
          } else {
            this.equipmentList = []
          }
          if (this.filteredEquipments.length && !this.selectedItem) {
            this.selectedItem = this.filteredEquipments[0]
          }
        } else {
          console.warn('获取装备列表失败:', res?.message || '未知错误')
          this.equipmentList = []
        }
      } catch (err) {
        console.error('获取装备列表异常:', err)
        this.equipmentList = []
      } finally {
        this.loading = false
      }
    },
    // 选择装备
    selectItem(item) {
      this.selectedItem = item
      this.opMessage = ''
      // 清空选择
      this.selectedBaseIndex = null
      this.selectedWashIndices = []
      this.selectedRemodelIndex = null
    },
    isSelected(item) {
      const id = item.equipmentId || item.EquipmentID || item.id
      const sid = this.selectedItem ? (this.selectedItem.equipmentId || this.selectedItem.EquipmentID || this.selectedItem.id) : null
      return id === sid
    },
    // 槽位映射与显示
    mapSlot(slot) {
      if (!slot) return ''
      return String(slot).toLowerCase()
    },
    slotName(slot) {
      const map = { weapon: '武器', armor: '衣服', helmet: '帽子', boots: '鞋子' }
      return map[slot] || slot
    },
    // 根据 item 的 slot 或 type 映射槽位
    itemSlot(item) {
      if (!item) return ''
      const slotRaw = item.slot || item.Slot
      if (slotRaw) return this.mapSlot(slotRaw)
      const type = item.type != null ? item.type : item.Type
      const t = Number(type)
      const typeMap = { 1: 'weapon', 2: 'helmet', 3: 'armor', 4: 'boots' }
      return typeMap[t] || 'weapon'
    },
    typeIcon(item) {
      const key = this.itemSlot(item)
      const map = { weapon: '⚔️', armor: '🛡️', helmet: '🪖', boots: '🥾' }
      return map[key] || '🗡️'
    },
    isUp(item) {
      return !!(item.is_up || item.IsUp || item.on_battle || item.OnBattle)
    },
    displayName(item) {
      return item.name || item.Name || `装备#${item.equipmentId || item.EquipmentID || item.id}`
    },
    level(item) {
      return item.level || item.Level || 1
    },
    originLevel(item) {
      return item.origin_level || item.OriginLevel || item.orig_level || item.OrigLevel || 1
    },
    remodelLevel(item) {
      if (!item) return 0
      return item.remodel_level || item.RemodelLevel || 0
    },
    // 属性归一化
    normalizeAttrs(list) {
      if (!Array.isArray(list)) return []
      return list.map(a => {
        if (typeof a === 'string') {
          const m = a.match(/^(.+?)\s+(\d+)(?:\/(\d+))?$/)
          if (m) {
            const name = m[1].trim()
            const value = Number(m[2])
            const max = m[3] ? Number(m[3]) : 0
            return { name, value, max }
          }
          return { name: a, value: 0, max: 0 }
        }
        const name = a.name || a.key || a.attr || a.Attr || '未知'
        const value = a.value ?? a.val ?? a.current ?? a.Current ?? 0
        const max = a.max ?? a.limit ?? a.Max ?? 0
        return { name, value, max }
      })
    },
    attrName(attr) { return attr.name },
    attrValueText(attr) {
      return attr.max ? `${attr.value}/${attr.max}` : `${attr.value}`
    },
    // 选择逻辑
    toggleBase(idx) {
      this.selectedBaseIndex = (this.selectedBaseIndex === idx) ? null : idx
    },
    toggleWash(idx) {
      const i = this.selectedWashIndices.indexOf(idx)
      if (i >= 0) this.selectedWashIndices.splice(i, 1)
      else this.selectedWashIndices.push(idx)
    },
    toggleRemodel(idx) {
      this.selectedRemodelIndex = (this.selectedRemodelIndex === idx) ? null : idx
    },
    // 操作：强化/洗练/改造
    async doStrengthen() {
      if (!this.selectedItem) return
      // 强化需选择基础或改造词条之一
      if (this.selectedBaseIndex === null && this.selectedRemodelIndex === null) {
        this.opMessage = '请先选择一条可强化的词条（基础或改造）'
        return
      }
      try {
        this.opLoading = true
        const roleId = (typeof uni !== 'undefined' ? uni.getStorageSync('role_id') : localStorage.getItem('role_id'))
        const equipmentId = this.selectedItem.equipmentId || this.selectedItem.EquipmentID || this.selectedItem.id
        // 目前后端不区分具体词条，保留选择信息以便后续扩展
        const res = await strengthenEquipment({ role_id: roleId, equipment_id: equipmentId })
        if (res && res.code === 1) {
          this.opMessage = '强化成功'
          await this.loadEquipments()
        } else {
          this.opMessage = res?.message || '强化失败'
        }
      } catch (err) {
        console.error('强化异常:', err)
        this.opMessage = '强化接口异常'
      } finally {
        this.opLoading = false
      }
    },
    async doWash() {
      if (!this.selectedItem) return
      if (this.selectedWashIndices.length === 0) {
        this.opMessage = '请选择至少一个洗练词条'
        return
      }
      try {
        this.opLoading = true
        const roleId = (typeof uni !== 'undefined' ? uni.getStorageSync('role_id') : localStorage.getItem('role_id'))
        const equipmentId = this.selectedItem.equipmentId || this.selectedItem.EquipmentID || this.selectedItem.id
        const res = await washEquipment({ role_id: roleId, equipment_id: equipmentId })
        if (res && res.code === 1) {
          this.opMessage = `洗练成功（重生成 ${this.selectedWashIndices.length} 条）`
          await this.loadEquipments()
          this.selectedWashIndices = []
        } else {
          this.opMessage = res?.message || '洗练失败'
        }
      } catch (err) {
        console.error('洗练异常:', err)
        this.opMessage = '洗练接口异常'
      } finally {
        this.opLoading = false
      }
    },
    async doRemodel() {
      if (!this.selectedItem) return
      try {
        this.opLoading = true
        const roleId = (typeof uni !== 'undefined' ? uni.getStorageSync('role_id') : localStorage.getItem('role_id'))
        const equipmentId = this.selectedItem.equipmentId || this.selectedItem.EquipmentID || this.selectedItem.id
        const res = await remodelEquipment({ role_id: roleId, equipment_id: equipmentId })
        if (res && res.code === 1) {
          this.opMessage = '改造成功，改造等级提升'
          await this.loadEquipments()
        } else {
          this.opMessage = res?.message || '改造失败'
        }
      } catch (err) {
        console.error('改造异常:', err)
        this.opMessage = '改造接口异常'
      } finally {
        this.opLoading = false
      }
    },
    // 打造新装备
    async doForge(type) {
      try {
        this.opLoading = true
        const roleId = (typeof uni !== 'undefined' ? uni.getStorageSync('role_id') : localStorage.getItem('role_id'))
        const res = await forgeEquipment({ role_id: roleId, type })
        if (res && res.code === 1) {
          this.opMessage = `打造成功：${res.data?.name || ''}`
          await this.loadEquipments()
          // 选中新打造的装备
          const newId = res.data?.id || res.data?.EquipID || res.data?.equipmentId
          const found = (this.equipmentList || []).find(i => (i.id || i.EquipmentID || i.equipmentId) === newId)
          if (found) this.selectedItem = found
        } else {
          this.opMessage = res?.message || '打造失败'
        }
      } catch (err) {
        console.error('打造异常:', err)
        this.opMessage = '打造接口异常'
      } finally {
        this.opLoading = false
      }
    },
    // 返回
    goBack() {
      window.location.hash = '/pages/main/index'
    },
    // 打开引导说明
    openGuide() {
      this.showGuide = true
    },
    closeGuide() {
      this.showGuide = false
    },

  }
}
</script>

<style scoped>
/* 江湖铁匠铺主题 */
.smithy-theme {
  background: linear-gradient(180deg, #f7f2e7 0%, #efe6d9 100%);
  min-height: 100vh;
  font-family: "STSong", "Noto Serif SC", serif;
}

.forge-container { padding: 14px; }
.header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.header h2 { margin: 0; color: #4b2e0f; letter-spacing: 1px; }
.header-center { flex: 1; text-align: center; }
.header-center h2 { margin: 0 0 4px 0; }
.theme-desc { color: #8a6a3f; font-size: 12px; }
.back-btn { background: #8a6a3f; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; flex-shrink: 0; }
.back-btn:hover { background: #6f5532; }
.info-dot { width: 28px; height: 28px; border-radius: 50%; background: #c29d5b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; box-shadow: 0 0 0 2px rgba(194,157,91,0.3) inset; flex-shrink: 0; }
.info-dot:hover { background: #d4af37; transform: scale(1.1); }

/* 顶部消耗道具 */
.consumables-bar { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.consumables-section { background: rgba(255,255,255,0.95); border: 1px solid #d8c7a0; border-radius: 10px; padding: 12px; }
.section-title { color: #5b4523; font-weight: 600; margin-bottom: 10px; font-size: 14px; }
.items { display: grid; grid-template-columns: 1fr; gap: 8px; }
.items.two-rows { grid-auto-flow: column; grid-template-rows: repeat(2, auto); justify-items: start; }
.item { display: flex; align-items: center; justify-content: flex-start; font-size: 14px; color: #7a6440; }
.item.enough { color: #2f7a2f; }
.item.optional { opacity: 0.9; }
.simple-line { font-size: 14px; color: #5b4523; }


.content { display: grid; grid-template-columns: 40% 60%; gap: 12px; margin-top: 14px; }
.left-list { background: rgba(255,255,255,0.9); border: 1px solid #d8c7a0; border-radius: 8px; padding: 10px; }
.list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: #5b4523; }
.refresh-btn { background: #c29d5b; color: #fff; border: none; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.equipment-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; }
.equipment-item { display: flex; align-items: center; padding: 8px; border: 1px solid #eadcc1; border-radius: 8px; cursor: pointer; background: #fff; }
.equipment-item.active { border-color: #c29d5b; background: #fff7e6; }
.item-icon { width: 36px; height: 36px; border-radius: 6px; background: #faf3e7; border: 1px solid #e0d6c0; display: flex; align-items: center; justify-content: center; margin-right: 10px; }
.item-name { font-weight: 600; color: #3b2a12; }
.badge-up { margin-left: 8px; background: #c29d5b; color: #fff; padding: 2px 6px; border-radius: 999px; font-size: 12px; }
.item-extra { font-size: 12px; color: #7a6440; margin-top: 2px; display: flex; gap: 8px; }

.right-panel { }
.panel-card { background: rgba(255,255,255,0.95); border: 1px solid #d8c7a0; border-radius: 8px; padding: 12px; }
.panel-card.empty { display: flex; align-items: center; justify-content: center; height: 300px; color: #7a6440; }

/* 装备信息 */
.equip-info { display: grid; grid-template-columns: 56px 1fr; gap: 10px; border-bottom: 1px solid #eadcc1; padding-bottom: 8px; margin-bottom: 10px; }
.detail-icon { width: 56px; height: 56px; border-radius: 8px; background: #faf3e7; border: 1px solid #e0d6c0; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.detail-name { margin: 0; color: #3b2a12; }
.detail-sub { font-size: 12px; color: #7a6440; display: flex; gap: 8px; flex-wrap: wrap; }

/* 词条区 */
.entries { display: grid; grid-template-columns: 1fr; gap: 12px; }
.entry-section { background: #fff; border: 1px solid #eadcc1; border-radius: 8px; padding: 8px; }
.entry-title { font-weight: 600; color: #5b4523; margin-bottom: 8px; }
.entry-list { display: grid; grid-template-columns: 1fr; gap: 6px; }
.entry-item { display: flex; align-items: center; justify-content: space-between; background: #f8f5ee; border: 1px solid #eadcc1; border-radius: 6px; padding: 6px 8px; cursor: pointer; }
.entry-item.selected { border-color: #c29d5b; box-shadow: 0 0 0 2px rgba(194, 157, 91, 0.2) inset; }
.entry-name { color: #3b2a12; }
.entry-value { color: #7a6440; font-weight: 600; }
.entry-tip { margin-top: 6px; font-size: 12px; color: #7a6440; }

/* 操作区 */
.actions { display: flex; gap: 10px; margin-top: 14px; }
.action-btn { background: #eadcc1; color: #3b2a12; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; }
.action-btn.primary { background: #c29d5b; color: #fff; }
.action-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.op-status { margin-top: 10px; color: #4b2e0f; }
.empty-tip { color: #7a6440; padding: 10px; text-align: center; }

/* 打造新装备 */
.forge-bar { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.95); border: 1px solid #d8c7a0; border-radius: 8px; padding: 10px; }
.forge-title { font-weight: 600; color: #3b2a12; }
.forge-actions { display: flex; gap: 8px; }

/* 改造等级特效：大于7级时加光晕 */
.remodel-glow .panel-card { box-shadow: 0 0 12px rgba(194, 157, 91, 0.6); }

/* 引导说明弹窗 */
.guide-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; z-index: 999; }
.guide-dialog { background: #fffdf7; border: 1px solid #d8c7a0; border-radius: 10px; padding: 14px; width: 520px; max-width: calc(100% - 40px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
.guide-title { font-weight: 700; color: #4b2e0f; margin-bottom: 8px; }
.guide-content { color: #3b2a12; font-size: 14px; line-height: 1.6; }
.guide-content .minor { color: #7a6440; font-size: 12px; margin-top: 6px; }
.guide-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
</style>
.mat-icon { width: 18px; height: 18px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,0.05) inset; }